
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Move the Ball</title> 
<meta name="viewport" content="width=device-width,user-scalable=no" /> 
<style> 
#no {
	display: none;	
}
#ball {
	width: 20px;
	height: 20px;
	border-radius: 10px;
	-webkit-radius: 10px;
	background-color: red;
	position:absolute;
	top: 0px;
	left: 0px;
}
</style> 
</head> 
 
<body> 
<div id="content"> 
    <h1>Move the Ball</h1> 
    <div id="yes"> 
        <p>Move your device to move the ball. This sample is using Device Orientation and Motion API compatible with iOS since 4.2</p> 
        <p>Mantain your device in portrait orientation for better results (you can lock it)</p> 
        <div id="ball"></div> 
    </div> 
    <div id="no"> 
    Your browser does not support Device Orientation and Motion API. Try this sample with iPhone, iPod or iPad with iOS 4.2+.    
    </div> 
</div> 
<script> 
/*
Curious about the code? Great! Welcome to this code ;)
Feel free to copy and use this code
If you are going to blog or tweet about it or if you are going to create a better
code, please mantain the link to www.mobilexweb.com or @firt in Twitter.
*/
 
// Position Variables
var x = 0;
var y = 0;
 
// Speed - Velocity
var vx = 0;
var vy = 0;
 
// Acceleration
var ax = 0;
var ay = 0;
 
var delay = 10;
var vMultiplier = 0.01;
 
if (window.DeviceMotionEvent==undefined) {
	document.getElementById("no").style.display="block";
	document.getElementById("yes").style.display="none";
 
} else {
	window.ondevicemotion = function(event) {
		ax = event.accelerationIncludingGravity.x;
		ay = event.accelerationIncludingGravity.y;
	}
 
	setInterval(function() {
		vy = vy + -(ay);
		vx = vx + ax;
 
		var ball = document.getElementById("ball");
		y = parseInt(y + vy * vMultiplier);
		x = parseInt(x + vx * vMultiplier);
		
		if (x<0) { x = 0; vx = 0; }
		if (y<0) { y = 0; vy = 0; }
		if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = 0; }
		if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = 0; }
		
		ball.style.top = y + "px";
		ball.style.left = x + "px";
	}, delay);
} 
 
</script> 
 
</body> 
</html> 